require(['./config'],() => {
   require(['template','header','footer'],(template,Header) => {
      class BuyShop{
         constructor(){
            this.init()
            this.render()
            if(this.cart){
            //有cart时才调用这些方法
            this.setAllCheckStatus()
            this.calcTotalMoney()
            this.checksChange()
            this.allCheckChange()
            this.add()
            this.sub()
            this.del()
            }
            // this.allCheckChange()
            // console.log(this.cart.length)
         }
         init(){
            //头部复用
            // new Header('/html/modules/header.html .header-top')
            Header.removeNav()
            localStorage.removeItem('id')
         }
         render(){
            //根据localStorage购物车数里渲染列表
            const cookieName = Header.name
            const cart = localStorage.getItem(`cart${Header.name}`)
            this.cart = JSON.parse(cart)
            console.log(this.cart)
            if(cart){
               $('#tbody').html(template('tbodyTemplate',{cart:this.cart}),)
               $('.empty').hide()
               $('.buy').show()
               $('#buy').html(template('buyTemplate',{cart:this.cart}))
            }else{
               $('.empty').show()
               $('.buy').hide()
            }
         }

         //设置全选框状态
         setAllCheckStatus () {
            let isAllCheck = this.cart.every(shop => shop.check)
            $('#allCheck').prop('checked', isAllCheck)
          }

          //当各个商品的input改变时时
          checksChange(){  
            const _this = this
            $('.check').on('change',function(){
               const id = $(this).parents('tr').data('id')
               _this.cart = _this.cart.map(shop => {
                  if(shop.id == id){
                     shop.check = $(this).prop('checked')
                  }
                  return shop
               })
               //重新存localStorage
               localStorage.setItem(`cart${Header.name}`,JSON.stringify(_this.cart))
               //调用全选
               _this.setAllCheckStatus()
               //调用金额
               _this.calcTotalMoney()

            })
          }

          //改变了全选的状态
          allCheckChange(){
           $('#allCheck').on('change',() => {
              this.cart = this.cart.map(shop => {
                 shop.check = $('#allCheck').prop('checked')
                 return shop
              })
              //设置单个按钮的状态
              $('.check').each((index,item) => {
                 $(item).prop('checked',$('#allCheck').prop('checked'))
              })
              //重新存localStorage
              localStorage.setItem(`cart${Header.name}`,JSON.stringify(this.cart))
              //调用全选
              //   this.setAllCheckStatus()
              //调用金额
              this.calcTotalMoney()
           })
          }
          //计算总金额
         calcTotalMoney(){
            if(this.cart.length){
            const allMoney = this.cart.reduce((money, shop) => {
               if (shop.check) money += shop.price * shop.count
               // 无论条件是否满足，都要return
               return money
             }, 0)
             $('#allPrice').html(allMoney.toFixed(2))
             const allNum = this.cart.reduce((num,shop) => {
                if(shop.check) num+=shop.count
                return num
             },0)
             $('#allNum').html(allNum)
            }
         }
         //加
         add(){
            const _this = this
            $('.add').on('click',function(){
               let count = $(this).parents('tr').find('.num').val()
               count++
               $(this).parents('tr').find('.num').val(count)
               const id = $(this).parents('tr').data('id')
               _this.cart = _this.cart.map(shop => {
                  if(id == shop.id){
                     shop.count = count
                     this.price = count*shop.price
                  }
                  return shop
               })
               $(this).parents('tr').find('.price').html(this.price.toFixed(2))
               //存储localStorage
               localStorage.setItem(`cart${Header.name}`,JSON.stringify(_this.cart))
               //调用金额方法
               _this.calcTotalMoney()
                //调用
                Header.calcCartCount()
            })
         }
         //减
         sub(){
            const _this = this
            $('.sub').on('click',function(){
               let count = $(this).parents('tr').find('.num').val()
               count--
               if(count<=1){
                  count = 1
              
               }
            
               $(this).parents('tr').find('.num').val(count)
               const id = $(this).parents('tr').data('id')
               _this.cart = _this.cart.map(shop => {
                  if(id == shop.id){
                     shop.count = count
                     this.price = count*shop.price
                  }
                  return shop
               })
               $(this).parents('tr').find('.price').html(this.price.toFixed(2))
               //存储localStorage
               localStorage.setItem(`cart${Header.name}`,JSON.stringify(_this.cart))
               //调用金额方法
               _this.calcTotalMoney()
                //调用
                Header.calcCartCount()
            })
         }
         //删除
         del(){
            const _this = this
            $('.del').on('click',function(){
               const id = $(this).parents('tr').data('id')
               _this.cart = _this.cart.filter(shop => {
                  //返回满足条件的那些数据组成的新数组
                  return shop.id != id

               })

               
               if(_this.cart.length === 0){
                  localStorage.removeItem(`cart${Header.name}`)
                  _this.render()
                  console.log(111)
               }
               $(this).parents('tr').remove()
                //存储localStorage
               if(_this.cart){
               localStorage.setItem(`cart${Header.name}`,JSON.stringify(_this.cart))
               //调用金额方法
               _this.calcTotalMoney()
               //调用
               Header.calcCartCount()
               }
            })
         }
      }
      new BuyShop()
   })
})